<template>
    <section class="jumbotron">
        <h2 class="jumbotron-heading">Search Github Users</h2>
        <h4 class="jumbotron-heading">搜索GitHub上的用户</h4>
        <div>
            <input type="text" placeholder="在这输入你搜索的关键字" v-model="keyWord"/>&nbsp;
            <button @click="searchUsers">Search</button>
        </div>
    </section>
</template>

<script>
    import axios from 'axios';

    export default {
        name:'Search',
        data(){
            return {
                keyWord:''
            }
        },
        methods:{
            // 搜索用户
            searchUsers(){
                // 发起请求前：将'是否初始加载'的值设置为false，'正在加载中'设置为true
                this.$bus.$emit('updateListData' ,{isFirst:false ,isLoading:true ,errorMsg:'' ,users:[]});
                // 发送请求：调用GitHub搜索用户接口，传递一个参数：keyWord（关键字）
                axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response => {
                        // console.log('请求成功了' ,response.data.items);
                        // 请求成功：传递用户列表数据
                        this.$bus.$emit('updateListData' ,{isLoading:false ,errorMsg:'' ,users:response.data.items});
                    },
                    error => {
                        // console.log('请求失败了' ,error.message);
                        // 请求失败：传递错误信息，'初始加载'和'正在加载'设置为fasle，页面展示错误信息。
                        this.$bus.$emit('updateListData' ,{isLoading:false ,errorMsg:error.message ,users:[]});
                    }
                )
            }
        }
    }
</script>

<style>

</style>